<template>
  <a-input-search
    class="search-event"
    placeholder="请输入事件类型"
    enter-button
    v-model:value="value"
    @search="onSearch"
  >
  </a-input-search>
  <!----------------------------- 事件表格弹窗 -------- ----------------- -->
  <!-- popup弹窗 -->
  <div id="mapCon">
    <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content" ref="content"></div>
    </div>
  </div>
</template>
<script setup>
import { initMap } from "hooks/initMap";
import { storeToRefs } from "pinia";
import { queryPoint } from "assets/libs/utils/queryPoint.js";
import { Query } from "assets/libs/utils/ES6Query.js";

import { ref, onMounted, nextTick, reactive } from "vue";
import { useMapStore } from "stores/mapStore.js";
import { message } from "ant-design-vue";
/* 实例化useMapStore */
const mapStore = useMapStore();
/* 解构并响应式 */
const { map } = storeToRefs(mapStore);
const value = ref("");
const eventFlag = ref(false);
const content = ref(null);
let info = null;
let position = null;
const container = ref(null);
const formState = reactive({
  eventId: "",
  type: "",
  level: "",
  datetime: "",
  address: "",
  number: "",
  user: "",
  statu: "",
});
var eventSource = new ol.source.Vector({
  wrapX: false,
});
/* 权限 */
const usertype = reactive({
  traffic: 1,
});
// 创建用于标注查询到的事件的图层
var docLayer = new ol.layer.Vector({
  source: eventSource,
  style: new ol.style.Style({
    image: new ol.style.Icon({
      // anchorOrigin: 'bottom-right',
      // anchorXUnits: 'fraction',
      // anchorYUnits: 'pixels',
      // offsetOrigin: 'top-right',
      // offset:[0,10],
      //图标缩放比例
      scale: 0.5,
      //透明度
      opacity: 1,
      //图标的url
      src: "/src/assets/images/标记瞄准.png",
    }),
  }),
});
let popup = new ol.Overlay({
  //要转换成overlay的HTML元素
  element: container.value,
  //当前窗口可见
  autoPan: true,
  //Popup放置的位置
  positioning: "bottom-center",
  //是否应该停止事件传播到地图窗口
  stopEvent: false,
  autoPanAnimation: {
    //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
    duration: 250,
  },
});
function onSearch(searchValue) {
  console.log(1111111111);
  //创建图层对象, 将数据源添加到图层图像
  var eventLayer = new ol.layer.Vector({
    source: eventSource,
  });

  map.value.addLayer(eventLayer);
  //console.log(eventSource);
  //判断当前事件图层是否有要素数据
  if ((eventSource.revision_ = 0)) {
    eventSource.clear();
  }
  //获取关键字
  const keywords = value.value;
  if (!keywords) {
    message.warning("输入不能为空，请重新输入");
    return;
  }

  const sql = `事件类型 LIKE '%${keywords}%' OR 发生地点 LIKE '%${keywords}%' OR 处理状态 LIKE '${keywords}'`;
  //console.log(sql);
  Query.queryBySql({
    where: sql,
    service: {
      docName: "guanggu",
      //  事件在图层2
      layerId: 2,
    },
    callback: (e) => {
      if (e.TotalCount == 0) return message.warning("没有查询到相应的数据");
      //初始化Zondy.Format.PolygonJSON类
      var format = new Zondy.Format.PolygonJSON();
      //将MapGIS要素JSON反序列化为ol.Feature类型数组
      var features = format.read(e);
      //console.log("查询到的数据", features);
      eventSource.addFeatures(features);
      /* 将查询到的要素高亮标注显示， */
      map.value.addLayer(eventLayer);
    },
  });
  activeMap();
}
//点击地图事件查询
function activeMap() {
  map.value.on("click", handleMap); //激活地图点击事件
  map.value.on("pointermove", handleToPointer); //激活地图点击事件
}
//当指向标注时改变鼠标光标状态
function handleToPointer(e) {
  var pixel = map.value.getEventPixel(e.originalEvent);
  var hit = map.value.hasFeatureAtPixel(pixel);
  map.value.getTargetElement().style.cursor = hit ? "pointer" : "";
}
function handleMap(e) {
  var feature = map.value.forEachFeatureAtPixel(
    e.pixel,
    function (feature, layer) {
      return feature;
    }
  );
  if (feature) {
    position = feature.getGeometry().flatCoordinates;
    popup.setPosition(position);
    /* 这个就可以拿到fid,拿到之后去空间数据库查这条数据 */
    Query.queryByFID({
      fid: feature.id_,
      service: {
        name: "guanggu",
        layerId: 2,
      },
      callback: (res) => {
        res = JSON.parse(JSON.stringify(res)).SFEleArray[0].AttValue;
        info = `事件类型：${res[1]}<br/>
                        事件等级：${res[2]}<br/>
                        发生时间：${res[3]}<br/>
                        发生地点：${res[4]}<br/>
                        车牌号：${res[5]}<br/>
                        驾驶员：${res[6]}<br/>
                        `;
        setTimeout(() => {
          content.value.innerHTML = info;
        }, 1);
      },
    });
  }
}
</script>
<style>
/* --------------popup弹窗------------------- */
/* popup弹窗 */
.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 0px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 45px;
    left: -50px;
}

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-closer:after {
    position: absolute;
    content: "X";
    color: #fff;
    font-size: 25px;
    top: 15px;
    right: 25px;
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
}

#popup-content {
    padding: 20px;
    padding-bottom: 10px;
    font-size: 14px;
    font-family: '微软雅黑';
}

#popup-content > h5 {
    background: #2196f3;
}
</style>
